<template>
    <scale-screen width="1920" height="1080" :delay="500" :fullScreen="false" :boxStyle="{
        background: '#03050C',
        overflow: isScale ? 'hidden' : 'auto',
    }" :wrapperStyle="wrapperStyle" :autoScale="isScale">
        <div class="content_wrap">
            <Headers />
            <RouterView />
            <MessageContent/>
        </div>
    </scale-screen>
    <Setting />
</template>

<script setup lang="ts">
import ScaleScreen from "@/components/scale-screen";
import { RouterView } from "vue-router";
import { storeToRefs } from "pinia";
import { useSettingStore } from "@/stores/index";
import MessageContent from "@/components/Plugins/MessageContent";
import Headers from "@/views/header.vue";
import Setting from "@/views/setting.vue";

const settingStore = useSettingStore();
const { isScale } = storeToRefs(settingStore);
const wrapperStyle = {};

</script>

<style lang="scss" scoped>
.content_wrap {
    width: 100%;
    height: 100%;
    padding: 16px 16px 16px 16px;
    box-sizing: border-box;
    background-image: url("@/assets/img/pageBg.png");
    background-size: cover;
    background-position: center center;
}
</style>